<template>
	<view class="search-input-box"  :class="focus?'search-input-focus':''"  >
		<input class="search-input" 
			placeholder-class="search-input-placeholder"
			style="font-size:13px"
			:placeholder="placeholder" 
			@focus="onfocus" 
			@blur="onblur"
			@confirm="onclick"
			:value="modelValue" 
			@input="updateValue"
		/>
		<u-button size="mini" @click="onclick" type="primary"  >
			<text class="iconfont icon-sousuo"></text>
			<text>搜索</text>
		</u-button>
	</view>
	
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: String,
				default: ''
			},
			placeholder:{
				type: String,
				default: '输入搜索内容'
			}
		},
		name: "search-input",
		data() {
			return {
				focus: false,
			};
		},
		methods: {
			onfocus() {
				this.focus = true;
			},
			onblur() {
				this.focus = false;
			},
			updateValue(event) {
				this.$emit('update:modelValue', event.detail.value);
			},
			onclick(val){
				this.$emit('onclick',val);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-input {
		min-width:180px ;
		padding: 5px 5px;
		border-radius: 2px;
	}
	.search-input-placeholder {
		font-size: 13px;
	}

	.search-input-box {
		display: flex;
		gap:5px;
		align-items: center;
		padding:0 1px;
		border: 1px solid $uni-border-color02;
	}
	.search-input-focus {
		border: 1px solid $uni-color-primary;
	}
</style>